<template>
  <div id="box">
    xxxssssssssssssssssssss
    <div class="item1">333</div>
  </div>
</template>

<script>
function initScale(defaultBox = { width: 1920, height: 1080 }) {
  function handleScale() {
    let deviceWidth = document.documentElement.clientWidth;
    let deviceHeight = document.documentElement.clientHeight;
    let { width, height } = defaultBox;
    console.log("width", width);
    console.log("height", height);
    let scaleX = deviceWidth / 1920;
    let scaleY = deviceHeight / 1080;
    let fontSize = Math.min(scaleX, scaleY);
    console.log("1rem =", fontSize, "px");
    document.documentElement.style.fontSize = fontSize + "px";
    //居中
    // let container = document.getElementById("box");
    let container = document.getElementById("box");
    console.log("container", container);

    console.log("fontSize", fontSize);
    let rect = container.getBoundingClientRect();
    let moveX = (deviceWidth - rect.width) / 2;
    let moveY = (deviceHeight - rect.height) / 2;
    console.log("moveX", moveX);
    container.style.transition = "transition: transform 1s ease;";
    container.style.transform = `translate(${moveX}px, ${moveY}px)`;
  }

  function debounce(fn, delay = 300) {
    let timer = null;
    return function () {
      clearTimeout(timer);
      timer = setTimeout((_) => {
        fn();
        setTimeout((_) => {
          location.reload();
        }, 300);
      }, delay);
    };
  }

  handleScale();
  window.addEventListener("resize", debounce(handleScale, 300));
}
export default {
  methods: {},
  mounted() {
    initScale();
  },
};
</script>

<style scoped lang="scss">
#box {
  background: linear-gradient(90deg, #e988e1, #2c96dd);
  width: 1920rem;
  height: 1080rem;
  //   position: relative;
  position: fixed;
  /* transition: transform 1s ease; */

  .item1 {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    font-size: 24rem;
  }
}
</style>
